<template>
  <div class="app-container">
  <div class="filter-container">
        
        <el-input clearable v-model="search.car" placeholder="" style="width: 170px;margin-left:10px;"></el-input>

        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="名称">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="100" align="center" label="费用">
        <template slot-scope="scope">
          <span>{{ scope.row.fee }}</span>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="100" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  width="380" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="modifyClick(scope.row.id)">编辑</el-button>
                    
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="fetchData" />

<!-- 编辑 -->
<el-dialog :title="dialogModify.title" :visible.sync="dialogModify.visible"  width="700px">
    <div class="ci">
        <div class="item">
            <span class="name required">名称</span>
            <span class="value">
                <el-input disabled v-model="dialogModify.data.name" style="width:220px" ></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">费用</span>
            <span class="value">
                <el-input v-model="dialogModify.data.fee" style="width:220px" ></el-input>
            </span>
        </div>
        
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogModify.visible = false">取 消</el-button>
        <el-button type="primary" @click="saveClick()" :loading="dialogModify.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 编辑 -->



  </div>
</template>

<script>
import * as settingApi from '@/api/presale/setting'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'

export default {
    components: { Pagination },
    data(){
        return{
          search:{ 
              car:'',
          },
          listQuery: {
                page: 1,
                rows: 20,
                car:'',
          },
          list:null,
          listLoading:false,
          total:0,
          selectOptions:{
          },

          dialogModify:{
              visible:false,
              saveloading:false,
              title:'修改',
              data:{
                  id:'',
                  name:'',
                  fee:'',
              }
          },

          
        }
    },
    created(){
        var that=this;
        that.fetchData();
    },
    filters:{
    },
    methods:{
        fetchData(){
          var that=this;
            settingApi.getFeeList({}).then(res=>{
              if(res.data){
                that.list=[...res.data.items.map((item,index)=>{
                  item._id=index+1;
                  return item;
                })];
                that.total=res.data.total;
              }
            })
        },
        searchClick(){
          this.fetchData();
        },
        modifyClick(id){
          var that=this;
          that.dialogModify.visible=true;
          var selectItem=that.list.filter(o=>o.id==id)[0];
          that.dialogModify.data.id=selectItem.id;
          that.dialogModify.data.name=selectItem.name;
          that.dialogModify.data.fee=selectItem.fee;

        },
        saveClick(){
          var that=this;
          that.dialogModify.visible=false;
          
        },
        
    }
}
</script>

<style>

</style>